<template>
  <div>
    <div class="custom-mapinfo-right-card">
      <div class="cardTop"></div>
      <div class="cardMid">
        <ul>
          <li>
            <span class="right-card-item-icon right-card-item-dispute"></span>
            <div class="right-card-item-content">
              <span class="h1">矛盾纠纷</span>
              <span class="p"><b>{{showData.contradictoryAdjustment}}</b>个</span>
            </div>
          </li>
          <li>
            <span class="right-card-item-icon right-card-item-majorCase"></span>
            <div class="right-card-item-content">
              <span class="h1">重大案事件</span>
              <span class="p"><b>{{showData.importantCase}}</b>个</span>
            </div>
          </li>
          <li>
            <span class="right-card-item-icon right-card-item-emergency"></span>
            <div class="right-card-item-content">
              <span class="h1">突发事件</span>
              <span class="p"><b>108</b>个</span>
            </div>
          </li>
          <li>
            <span class="right-card-item-icon right-card-item-socialConditions"></span>
            <div class="right-card-item-content">
              <span class="h1">社情民意</span>
              <span class="p"><b>{{showData.folkLog}}</b>个</span>
            </div>
          </li>
          <li>
            <span class="right-card-item-icon right-card-item-peopleLivelihood"></span>
            <div class="right-card-item-content">
              <span class="h1">民生事件</span>
              <span class="p"><b>{{showData.eventInfo}}</b>个</span>
            </div>
          </li>

        </ul>
      </div>
      <div class="cardBot"></div>
    </div>

    <div class="custom-mapinfo-bottom-card">
      <div class="scardTop">
        <div class="searchForm">
          <el-col :span="20">
            <el-input class="keyword" v-model="selectForm.keyword" placeholder="请输入搜索内容"> </el-input>
          </el-col>
          <el-col :span="4">
            <el-button class="search_btn" type="primary" @click="search" >&nbsp;</el-button>
          </el-col>
        </div>
      </div>
      <div class="scardBot">
        <div class="custom-seach-item">
          <ul>
            <li :class="curItem === index?'active':''" v-for='(item, index) in searchItem' :key="index" @click="handleSelectItem(index)">
              <p>{{item.name}}</p>
              <img :src="item.img" />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-dialog class="special-style"
                    :title="totalName"
                    :visible.sync="dialogFormVisible"
                    :before-close="close">
      <component :is="comName" :detailForm='formData'></component>
  </el-dialog>
  </div>
</template>
<script>
import {getApplicationMatter, getApplicationMd, getApplicationZdaj, getApplicationMqrz, getApplicationMssj} from '@/http/application'
import contradictionsForm from '@/views/shizhanyingyong/MatterForm/AppFormContradictions'
import BigCaseForm from '@/views/shizhanyingyong/MatterForm/AppFormBigCase'
import PeopleLogForm from '@/views/shizhanyingyong/MatterForm/AppFormPeopleLog'
import MajorCasesForm from '@/views/shizhanyingyong/MatterForm/AppFormMajorCases'
export default {
  components: {contradictionsForm, BigCaseForm, PeopleLogForm, MajorCasesForm},
  props: {
    detailForm: {
      type: Object,
      default: function () {
        return {
        }
      }
    }
  },
  data () {
    return {
      loading: null,
      comName: 'contradictionsForm',
      selectForm: {},
      formData: {},
      showData: [],
      resData: [],
      dialogFormVisible: false,
      dialogTitle: '显示',
      curItem: '',
      searchItem: [
        {img: require('@/assets/application/matter/md_b.png'), name: '矛盾纠纷'},
        {img: require('@/assets/application/matter/zd_b.png'), name: '重大案事件'},
        {img: require('@/assets/application/matter/tf_b.png'), name: '突发事件'},
        {img: require('@/assets/application/matter/sq_b.png'), name: '社情民意'},
        {img: require('@/assets/application/matter/ms_b.png'), name: '民生事件'}
      ]
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      getApplicationMatter().then(resp => {
        if (resp.code && resp.code === '200') {
          this.showData = resp.data
        }
      })
    },
    search () {
      this.loadData()
      if (this.curItem !== '' && this.selectForm.keyword !== '') {
        this.loadingMast()
      } else {
        this.$message({
          type: 'info',
          message: '请先选择分类并且填写想要搜索的内容！'
        })
      }
    },
    loadingMast () {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    loadData () {
      this.resData = []
      if (this.curItem === 0) {
        getApplicationMd(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            resp.data.name = resp.location
            this.resData.push(resp.data)
            this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
      if (this.curItem === 1) {
        getApplicationZdaj(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            resp.data.name = resp.location
            this.resData.push(resp.data)
            this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
      if (this.curItem === 2) {
        setTimeout(() => {
          this.loading.close()
          this.$message({
            type: 'success',
            message: '暂无数据！'
          })
        }, 500)
      }
      if (this.curItem === 3) {
        getApplicationMqrz(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            resp.data.name = resp.location
            this.resData.push(resp.data)
            this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
      if (this.curItem === 4) {
        getApplicationMssj(this.selectForm).then(resp => {
          if (resp.code && resp.code === '200') {
            resp.data.name = resp.location
            this.resData.push(resp.data)
            this.$emit('transmit', this.resData)
            this.loading.close()
          }
        })
      }
    },
    handleSelectItem (index) {
      if (this.curItem === index) {
        this.curItem = ''
      } else {
        this.curItem = index
      }
    },
    dialogShow (data) {
      this.getFormData(data, this.curItem)
      this.loadingMast()
    },
    close () {
      this.dialogFormVisible = false
    },
    getFormData (data, type) {
      if (type === 0) {
        setTimeout(() => {
          this.formData = data
          this.comName = 'contradictionsForm'
          this.loading.close()
          this.dialogFormVisible = true
        }, 500)
      }
      if (type === 1) {
        setTimeout(() => {
          this.formData = data
          this.comName = 'BigCaseForm'
          this.loading.close()
          this.dialogFormVisible = true
        }, 500)
      }
      if (type === 2) {
        setTimeout(() => {

        }, 500)
      }
      if (type === 3) {
        setTimeout(() => {
          this.formData = data
          this.comName = 'PeopleLogForm'
          this.loading.close()
          this.dialogFormVisible = true
        }, 500)
      }
      if (type === 4) {
        setTimeout(() => {
          this.formData = data
          this.comName = 'MajorCasesForm'
          this.loading.close()
          this.dialogFormVisible = true
        }, 500)
      }
    }
  },
  watch: {
    detailForm: {
      handler: function (data) {
        // this.dialogFormVisible = true
        // this.getFormData(data.id, this.curItem)
      },
      deep: true
    }
  },
  computed: {
    totalName: function () {
      let name = ''
      if (this.detailForm.communityName && this.detailForm.buildingName) {
        name = this.detailForm.communityName + '-' + this.detailForm.buildingName + '-' + this.detailForm.name
      } else {
        if (this.detailForm.communityName) {
          name = this.detailForm.communityName + '-' + this.detailForm.name
        } else if (this.detailForm.buildingName) {
          name = this.detailForm.buildingName + '-' + this.detailForm.name
        } else {
          name = this.detailForm.name
        }
      }
      return name
    }
  }
}
</script>
<style scoped>
  .custom-mapinfo-right-card li span.right-card-item-dispute{
    flex: 0 0 56px;
    height: 56px;
    width: 56px;
    margin-right: 7px;
    background-image: url(~@/assets/application/matter/md_r.png)
  }
  .custom-mapinfo-right-card li span.right-card-item-majorCase{
    flex: 0 0 56px;
    height: 56px;
    width: 56px;
    margin-right: 7px;
    background-image: url(~@/assets/application/matter/zd_r.png)
  }
  .custom-mapinfo-right-card li span.right-card-item-emergency{
    flex: 0 0 56px;
    height: 56px;
    width: 56px;
    margin-right: 7px;
    background-image: url(~@/assets/application/matter/tf_r.png)
  }
  .custom-mapinfo-right-card li span.right-card-item-socialConditions{
    flex: 0 0 56px;
    height: 56px;
    width: 56px;
    margin-right: 7px;
    background-image: url(~@/assets/application/matter/sq_r.png)
  }
  .custom-mapinfo-right-card li span.right-card-item-peopleLivelihood{
    flex: 0 0 56px;
    height: 56px;
    width: 56px;
    margin-right: 7px;
    background-image: url(~@/assets/application/matter/ms_r.png)
  }
</style>
